<template>
    <div>
        <h2>购物车</h2>
        <ul>
            <li v-for="product in $store.state.cart" :key="product.id">
                {{ product.name }} - ¥{{ product.price }} - 数量: {{ product.quantity }}
                <button @click="$store.dispatch('addProduct', product)">添加</button>
                <button @click="$store.dispatch('removeProduct', product.id)">删除</button>
                <input type="number" v-model.number="product.quantity" @input="$store.dispatch('updateProductQuantity', { productId: product.id, quantity: $event.target.value })">
            </li>
        </ul>
        <p>总价: ¥{{ $store.getters.totalPrice }}</p>
    </div>
</template>

<script>
export default {
    name: 'Cart'
};
</script>    